<template>
  <div>
    <div class="title">
      <div class="title" style="font-size: 30px; padding-bottom: 20px">
        <h1>/本网站项目的设计实现过程/</h1>
        <el-divider content-position="right">--此项目在vue3框架上基于vue2创建的--</el-divider>
        <el-divider content-position="right">--主要参考b站的项目(https://www.bilibili.com/video/BV1QU4y1E7qo?p=1)--</el-divider>
      </div>
      
      <div class="content">
        <div class="navigation-bars">
        <h2>说明：由于本文内容较长，特备导航目录</h2>
        <el-divider></el-divider>
        <span style="color:hsl(227, 31%, 65%);">
          <el-link type="info" href="#content1">一、pupa项目的创建</el-link><br>
          <el-link type="info" href="#content2">二、Element-ui的安装与使用</el-link><br>
          <el-link type="info" href="#content3">三、路由vue-router的安装与使用</el-link><br>
          <el-link type="info" href="#content4">四、less和less-loader的安装与使用</el-link><br>
          <el-link type="info" href="#content5">五、页面内容的实现与相关路径问题</el-link><br>
          <el-link type="info" href="#content6">六、vuex的安装与使用</el-link><br>
        </span>
      </div>
        <span>
          <el-divider></el-divider>
          <h2 id="content1">一、pupa项目的创建</h2>
          <el-divider></el-divider>
          <h3>1.首先，创建项目</h3>
          <h4>->vue create pupa 注意：自定义名pupa</h4>
          <h3>2.创建过程中出现选择，选基于vue或vue3环境，我选了vue2</h3>
          <h3>3.创建成功后，进入项目路径</h3>
          <h4>->cd pupa</h4>
          <h3>4.最后运行打开项目</h3>
          <h4>->npm run serve</h4>
        </span>
        <span>
          <el-divider></el-divider>
          <h2 id="content2">
            二、Element-ui的安装与使用(Element-ui网址：https://element.eleme.cn)
          </h2>
          <el-divider></el-divider>
          <h3>1.首先，下载安装Element-ui</h3>
          <h4>npm i element-ui -S</h4>
          <h3>2.全局引入，在src文件下的main.js中加入以下内容</h3>
          <h4>import ElementUI from 'element-ui';</h4>
          <h4>import 'element-ui/lib/theme-chalk/index.css';</h4>
          <h4>Vue.use(ElementUI);</h4>
          <h3>3.然后就可以使用Element-ui的组件了</h3>
        </span>
        <span>
          <el-divider></el-divider>
          <h2 id="content3">三、路由vue-router的安装与使用</h2>
          <el-divider></el-divider>
          <h3>1.首先，安装下载vue-router（版本不宜过高，可指定版本@3.2.0）</h3>
          <h4>->npm i vue-router@3.2.0</h4>
          <h3>
            2.安装成功后，在项目根目录下建一个文件夹router，再在router下面建index.js文件
          </h3>
          <h3>3.在此index.js文件下进行如下配置</h3>
          <span><img src="../../src/assets/image/learn2-6.png" alt="" /></span>
          <h3>4.并在文件夹src下的main.js文件里加入以下配置</h3>
          <span><img src="../../src/assets/image/learn2-1.png" alt="" /></span>
          <h3>5.配置完成后，开始使用</h3>
          <h4>
            (1)
            在项目根目录下创建一个文件夹views，再在文件夹下建一个Main.vue文件
          </h4>
          <span><img src="../../src/assets/image/learn2-2.png" alt="" /></span>
          <h4>(2) 然后在文件夹router下面的index.js配置Main.vue文件，如下</h4>
          <span><img src="../../src/assets/image/learn2-3.png" alt="" /></span>
          <h4>6.以上展示了router的大概使用</h4>
        </span>
        <span>
          <el-divider></el-divider>
          <h2 id="content4">四、less和less-loader的安装与使用</h2>
          <el-divider></el-divider>
          <h3>1.在项目根目录路径下，安装less和less-loader(版本过高可能会报错 , 需要指定版本)</h3>
          <h4>--注：版本号与项⽬中webpack版本要对应(个人理解为在vue2中用不高的版本)，不然安装不成功</h4>
          <h4>->npm install less@3.9.0 -save 注：安装less</h4>
          <h4>->npm install less-loader@5.0.0 -save 注：安装less-loader</h4>
          <h3>2.安装好后就可以使用了。</h3>
          <h3>3.less和less-loader用于处理less格式文件,我知道的有两种使用方式</h3>
          <h3>第一种</h3>
          <h4>--在style里加lang="less"使用</h4>
          <span><img src="../../src/assets/image/learn2-10.png" alt="" /></span>
          <h3>第二种</h3>
          <h4>(1)可以建less文件，在src/assets路径下建less文件夹，在less文件夹下，可以建多个less文件。</h4>
          <span><img src="../../src/assets/image/learn2-11.png" alt="" /></span>
          <h4>(2) 还可以将各个less文件引入到一个新的less文件下。</h4>
          <span><img src="../../src/assets/image/learn2-12.png" alt="" /></span>
          <h4>(3) 之后可以在src文件夹下的main.js里全局引入，这样各个less文件样式可作用于其对应的地方。</h4>
          <h4>import '../src/assets/less/index.less' 注：这是全局引入语句</h4>
        </span>
        <span>
          <el-divider></el-divider>
          <h2 id="content5">五、页面内容的实现与相关路径问题</h2>
          <el-divider></el-divider>
          <h3>
            1.首先，我们知道网站页面展示的文件是src文件夹下的App.vue里面的内容
          </h3>
          <h3>2.将里面的内容清空，留下如下内容</h3>
          <span><img src="../../src/assets/image/learn2-4.png" alt="" /></span>
          <h3>
            3.然后将views文件夹下的内容引入App.vue,让页面展示views文件夹下面的Main.js文件内容
          </h3>
          <span><img src="../../src/assets/image/learn2-5.png" alt="" /></span>
          <h3>
            4.在src文件夹下建公共组件文件夹components(包括header,aside,footer部分),在views文件夹下建main部分的各个组件
          </h3>
          <h3>5.配置与路径的逻辑关系</h3>
          <h4>
            (1)
            src文件夹下的main.js是各个安装包引入的全局配置和展示页面文件(也就是App.vue)的全局配置
          </h4>
          <h4>
            (2)
            router文件夹下的路由文件index.js,是按需引入各个文件内容(如：我的项目引入了views文件夹下的内容)
          </h4>
          <h4>
            (3) 这里说明一下，
            <h5>
              1)App.vue由main.js配置后是展示页面，而它引入views文件夹下的Main.vue,即此时页面展示的是Main.vue的内容；
            </h5>
            <h5>
              2)Main.vue里面的内容由各个组件构成，其中是components文件夹下的公共组件和views文件夹下的各个文件夹里的组件；
            </h5>
            <h5>
              3)views文件夹下的各个文件夹里的组件绕一圈，在router文件夹下的index.js
              里当作Main.vue的孩子跟着配置，
              这样可以让views下不同文件夹下的组件可以在Main.vue里通过与aside里的导航栏绑定，才能引入到Main.vue里切换展示；
            </h5>
            <h5>
              4)components文件夹下的公共组件直接在Main.vue里配置引入，这样可以在（views下不同文件夹下的组件在Main.vue里通过与aside里的导航栏绑定切换页面）
              的时候一直都在
            </h5>
          </h4>
          <h3>6.上面的路径配置</h3>
          <h4>(1) App.vue由main.js配置，项目本身已经配置好了</h4>
          <span><img src="../../src/assets/image/learn2-7.png" alt="" /></span>
          <h4>(2) components的组件配置</h4>
          <span><img src="../../src/assets/image/learn2-8.png" alt="" /></span>
          <h4>(3) Main.vue和views下不同文件夹下的组件的配置</h4>
          <span><img src="../../src/assets/image/learn2-9.png" alt="" /></span>
        </span>
        <span>
          <el-divider></el-divider>
          <h2 id="content6">六、vuex的安装与使用</h2>
          <el-divider></el-divider>
          <h3>1.官方解释：vuex是一个专为vue.js应用程序开发的 状态管理模式。它采用集中式存储管理应用的所有的状态，
            并以相应的规则保证状态以一种可预测的方式发生变化。</h3>
            <h3>2.vuex的学习可看此内容<el-link type="info" href="https://baijiahao.baidu.com/s?id=1713642753698731865&wfr=spider&for=pc">点击跳转</el-link></h3>
          <h3>3.说明：安装vuex是为了使用vuex进行事件通信(就是实现header区按钮点击,aside区的导航栏折叠/展开)</h3>
          <h3>4.下载安装vuex的相关依赖(同样，版本不宜过高,需指定版本)</h3>
          <h4>->npm install vuex@3.6.2</h4>
          <h3>5.安装完成，在项目根目录下建文件夹store，并在store下建index.js与tab.js文件（store下管理的文件为项目的配置文件）</h3>
          <h3>6.在src文件夹下的main.js里全局引入vuex的项目配置文件</h3>
          <span><img src="../../src/assets/image/learn2-13.png" alt="" /></span>
          <h3>7.大概这样，具体实现header区按钮点击控制aside区的导航栏折叠/展开功能看这里
            <router-link class="to-learn5" to="/learn5">
             <el-button type="text" style="color:hsl(227, 31%, 58%);">点击跳转</el-button>
             </router-link></h3>
        </span>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.title,.navigation-bars{
  position: fix;
}
.content {
  text-align: left;
  h2 {
    font-size: 25px;
  }
  h3,
  h4 {
    font-size: 20px;
    margin: 10px 0;
  }
  h5 {
    font-size: 17px;
    margin: 10px 0;
  }
}
</style>

<script>
export default {
  name: "vueLearn2", //与路由router里配置的name一样
  data() {
    return {};
  },
};
</script>